<template>
  <div id="areaTree">
    <div class="box-title">
      <button class="btn btn-success" @click="doAssign()">分配许可</button>
    </div>
    <div class="tree-box">
      <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
      </div>
    </div>
  </div>
</template>

<script>
// 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
import '../../static/ztree/jquery.ztree.all-3.5.min.js'
import axios from 'axios'
export default {
  name: 'areaTree',
  components: {
  },
  props: {
    id: Number // 父组件传递过来的值
  },
  data () {
    return {
      setting: {
        check: {
          enable: true
        },
        async: {
          enable: true,
          url: '/api/role/loadData?roleid=' + this.id,
          autoParam: ['id', 'name=n', 'level=lv']
        },
        view: {
          selectedMulti: false, // 不能同时 ctrl选中多个节点
          addDiyDom: function (treeId, treeNode) { // 用于在节点上固定显示用户自定义控件  icon图标
            var icoObj = $('#' + treeNode.tId + '_ico') // tId = permissionTree_1, $("#permissionTree_1_ico")
            if (treeNode.icon) {
              icoObj.removeClass('button ico_docu ico_open').addClass(treeNode.icon).css('background', '')
            }
          }
        }
      }
      /*
      zNodes: [
        { id: 1,
          pid: 0,
          name: '大良造菜单',
          open: true,
          nocheck: false,
          children: [
            {
              id: 11,
              pid: 1,
              name: '当前项目'
            },
            { id: 12,
              pid: 1,
              name: '工程管理',
              open: true,
              children: [
                {
                  id: 121,
                  pid: 12,
                  name: '我的工程'
                },
                {
                  id: 122,
                  pid: 12,
                  name: '施工调度'
                },
                {
                  id: 1211,
                  pid: 12,
                  name: '材料竞价'
                }
              ]
            },
            {
              id: 13,
              pid: 1,
              name: '录入管理',
              open: true,
              children: [
                {
                  id: 131,
                  pid: 13,
                  name: '用工录入'
                },
                {
                  id: 132,
                  pid: 13,
                  name: '商家录入'
                },
                {
                  id: 1314,
                  pid: 13,
                  name: '机构列表'
                }
              ]
            },
            {
              id: 14,
              pid: 1,
              name: '审核管理',
              open: true,
              children: [
                {
                  id: 141,
                  pid: 14,
                  name: '用工审核'
                },
                {
                  id: 142,
                  pid: 14,
                  name: '商家审核'
                },
                {
                  id: 145,
                  pid: 14,
                  name: '机构审核'
                }
              ]
            }
          ]
        }
      ]
      */
    }
  },
  mounted () {
    $.fn.zTree.init($('#treeDemo'), this.setting).expandAll(true)
  },
  methods: {
    doAssign () {
      let treeObj = $.fn.zTree.getZTreeObj('treeDemo')
      let nodes = treeObj.getCheckedNodes(true)
      let ids = 'roleid=' + this.id
      if (nodes.length === 0) {
        console.log(ids)
      } else {
        nodes.forEach(item => {
          ids += '&permissionids=' + item.id
        })
        axios.post('/api/role/doAssign', ids).then((response) => {
          console.log(response)
        }).catch(function (error) {
          console.log(error)
        })
      }
    }
  }
}
</script>
<style>

</style>
